<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row >
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.farmName" placeholder="请选择园区" @change="farmChange">
                  <a-select-option
                      v-for="(item, index) in farmList"
                      :key="index" :value="item.FarmId">
                    {{item.FarmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <div style="margin: 3px 0 0 8px;">
                <a-button type="primary" @click="search">查询</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <a-space class="operator">
        <a-button @click="add" type="primary">新建</a-button>
      </a-space>
      <standard-table style="margin-top: 10px"
                      :loading="loading"
                      :rowKey="(data, index) => index"
                      :columns="columns"
                      :dataSource="managerList">
        <div slot="AdminName" slot-scope="{text}">
          {{text ? text : '-'}}
        </div>
        <div slot="action" slot-scope="{text, record}">
          <a-popconfirm title="确定删除?" @confirm="delRecord(record)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="#" style="color: #f5222d"><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
    <!-- modal -->
    <a-modal
        :title="modalTitle"
        width="900px"
        :visible="visible"
        @ok="confirm"
        @cancel="cancel">
      <a-form-model
          ref="managerForm"
          :model="data"
          :rules="rules"
          :label-col="{span: 4}"
          :wrapper-col="{span: 14}">
        <a-form-model-item label="园区名称" prop="FarmId">
          <a-select v-model="data.FarmId" placeholder="请选择园区" @change="mdlFarmChange">
            <a-select-option v-for="(item, index) in farmList" :key="index" :value="item.FarmId">
              {{item.FarmName}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="昵称" prop="AdminName">
          <a-input v-model="data.AdminName" type="text" allowClear/>
        </a-form-model-item>
        <a-form-model-item label="手机号" prop="Phone">
          <a-input v-model="data.Phone" type="text" allowClear/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>

<script>
  import StandardTable from '@/components/table/StandardTable'
  import { FormModel } from 'ant-design-vue';
  import {list as farmList} from '@/services/farm'
  import {list, add, del} from '@/services/manager'
  const columns = [
    {
      title: '手机号',
      dataIndex: 'Phone',
      width: '600px',
      scopedSlots: { customRender: 'Phone' }
    },
    {
      title: '昵称',
      dataIndex: 'AdminName',
      scopedSlots: { customRender: 'AdminName' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: "Manager",
    data() {
      return {
        loading: false,
        modalTitle: '',
        visible: false,
        columns,
        farmList: [],
        managerList: [],
        query: {
          farmId: '',
          farmName: ''
        },
        data: {
          AdminName: '',
          FarmId: '',
          Phone: ''
        },
        rules: {
          FarmId: [
            { required: true, message: '请选择园区', trigger: 'change' },
          ],
          Phone: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "请输入正确的手机号",
            },
          ],
        }
      }
    },
    components: {
      StandardTable,
      FormModel
    },
    created() {
      this.getFarmList()
    },
    methods: {
      async getFarmList() {
        let res = await farmList()
        this.farmList = res.Data
      },
      async search() {
        this.loading = true
        let res = await list(this.query.farmId)
        this.managerList = res.Data
        this.loading = false
      },
      confirm() {
        this.$refs.managerForm.validate(valid => {
          if (valid) {
            console.log(this.data);
            add(this.data).then(res => {
              if(res.Code == 0) {
                this.$message.success("创建成功")
                if(this.query.farmId) {
                  this.search()
                }
                this.data = this.$options.data().data
              } else this.$message.error("创建失败")
            }).catch(err => {
              console.log(err);
              this.$message.error("创建失败")
            })
            this.visible = false
          }
        })
      },
      cancel() {
        this.visible = false
        this.$refs.managerForm.resetFields();
      },
      farmChange(e) {
        this.query.farmId = e
      },
      add() {
        this.modalTitle = '新建园区管理员'
        this.visible = true
      },
      mdlFarmChange(e) {
        console.log(e);
      },
      delRecord(row) {
        if(!row.Phone) {
          this.$message.error('无效管理员')
          return
        }
        del(row).then(res => {
          if(res.Code == 0) {
            this.$message.success("删除成功")
            if(this.query.farmId) {
              this.search()
            }
          this.search()
          } else this.$message.error("删除失败")
        }).catch(err => {
          console.log(err);
          this.$message.error("删除失败")
        })
      }
    }
  }
</script>

<style scoped>

</style>
